<script setup>
import {ref} from "vue";

//定义一个空对象
const person = ref({name:'',age:'',imgUrl:'',friends:[]});
//定义一个方法用来初始化数据
const loadData = ()=>{
  person.value={
    name:'范传奇',
    age:18,
    imgUrl:'fcq.jpg',
    friends:['李四','王五','赵六']
  }
}
</script>

<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td><img v-bind:src="person.imgUrl"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="friend in person.friends">{{friend}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData">点击加载信息</button>
</template>

<style scoped>

</style>